<script setup lang="ts">
import { reactive, ref, toRaw } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { index_api, create_order_api } from "@/package/mall/api/guide_vip";
import { guide_vip_order_mini_pay_api } from "@/package/mall/api/guider_home";
import { user_info_api } from "@/api/guider_home";
import { requestPayment } from "@/utils/payment";
import { AppData } from "@/utils/app";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import NavBack from "@/components/nav/back.vue";
import NavBg from "@/components/nav/bg.vue";
import NavSpace from "@/components/nav/space.vue";
import IndexProductItem from "./components/index-product-item.vue";

onLoad(() => {
  index_api().then((resp) => {
    bgUrl.value = resp.img_url;
    productList.value = resp.product_list;
    if (resp.product_list.length > 0) productClick(0);
    privilegeList.value = resp.icon_list;
  });
});

const bgUrl = ref("");

const productData = reactive({ id: "", price: "", name: "" });
const productList = ref<any[]>([]);
const productClick = (index: number) => {
  const product = productList.value[index];
  productData.id = product.id;
  productData.price = product.price;
  productData.name = product.name;
};

const buyClick = () => {
  Toast.showLoading();
  create_order_api({ product_id: productData.id })
    .then((resp) => {
      return guide_vip_order_mini_pay_api({ order_id: resp.order_id }).then(
        (resp) => {
          Toast.hideLoading();
          requestPayment(resp, () => {
            Toast.show("支付成功");
            // 刷新 vip 状态
            user_info_api().then((resp) => {
              const userData = AppData.userData;
              userData.is_vip_member = resp.is_vip_member;
              AppData.userData = userData;
            });
          });
        }
      );
    })
    .catch(() => Toast.hideLoading());
};

const privilegeList = ref<any[]>([]);
const privilegeClick = (index: number) => {
  Router.navigateTo(`/package/mall/pages/vip/privilege`, (resp) => {
    resp.eventChannel.emit("ev-privilege-data", {
      productData: toRaw(productData),
      privilegeIndex: index,
      privilegeList: toRaw(privilegeList.value),
    });
  });
};
</script>

<template>
  <NavBack />
  <NavBg :url="bgUrl" />
  <NavSpace />

  <view class="index-product">
    <scroll-view
      class="index-product-wrapper"
      scroll-x
      enhanced
      :show-scrollbar="false"
    >
      <view class="index-product-space"></view>
      <view
        class="index-product-item"
        v-for="(i, d) of productList"
        :key="i.id"
        :style="{ width: productData.id === i.id ? '270rpx' : '' }"
        @click="productClick(d)"
      >
        <IndexProductItem :info="i" :isActive="productData.id === i.id" />
      </view>
    </scroll-view>
  </view>

  <view class="index-btn" @click="buyClick">
    <image class="index-btn-img" src="@/package/mall/static/vip-btn.png" />
    <view class="index-btn-text">
      ￥{{ productData.price
      }}<text class="index-btn-text2">购买{{ productData.name }}</text>
    </view>
  </view>

  <view class="index-privilege">
    <view class="index-privilege-title">
      <image
        class="index-privilege-title2"
        src="@/package/mall/static/vip-privilege.png"
      />
      会员特权
      <image
        class="index-privilege-title2"
        src="@/package/mall/static/vip-privilege.png"
        style="transform: rotate(180deg)"
      />
    </view>
    <view class="index-privilege-wrapper">
      <view
        class="index-privilege-item"
        v-for="(i, d) of privilegeList"
        :key="i.id"
        @click="privilegeClick(d)"
      >
        <image class="index-privilege-img" :src="i.mini_icon" />
        <view class="index-privilege-name">{{ i.name }}</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
page {
  padding-top: 184rpx;
  background-color: #ffffff;
}

.index-product {
  position: relative;
  padding-top: 30rpx;
  padding-bottom: 10rpx;
  margin: 0 30rpx 30rpx;
  border-radius: 20rpx;
  backdrop-filter: blur(20rpx);

  .index-product-wrapper {
    width: 100%;
    height: 340rpx;
    white-space: nowrap;
  }

  .index-product-space,
  .index-product-item {
    display: inline-block;
    vertical-align: top;
  }

  .index-product-space {
    width: 20rpx;
  }

  .index-product-item {
    width: 240rpx;
    height: 300rpx;
    margin-top: 20rpx;
    margin-right: 20rpx;
  }
}

.index-btn {
  position: relative;
  width: 650rpx;
  height: 88rpx;
  margin: 0 auto 80rpx;

  .index-btn-img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .index-btn-text {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 40rpx;
    color: #ffffff;
    line-height: 56rpx;
    white-space: nowrap;
    font-weight: bold;
    transform: translate(-50%, -50%);
  }

  .index-btn-text2 {
    margin-left: 20rpx;
    font-size: 32rpx;
    line-height: 46rpx;
  }
}

.index-privilege {
  padding-bottom: 20rpx;

  .index-privilege-title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56rpx;
    font-size: 40rpx;
    color: #795021;
    font-weight: bold;
  }

  .index-privilege-title2 {
    width: 102rpx;
    height: 4rpx;
    margin: 0 30rpx;
  }

  .index-privilege-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding-left: 60rpx;
  }

  .index-privilege-item {
    width: 190rpx;
    height: 164rpx;
    padding-top: 20rpx;
    margin-right: 30rpx;
    margin-bottom: 30rpx;
  }

  .index-privilege-img {
    display: block;
    width: 60rpx;
    height: 60rpx;
    margin: 0 auto 16rpx;
  }

  .index-privilege-name {
    padding: 0 10rpx;
    font-size: 24rpx;
    color: #333333;
    line-height: 34rpx;
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
</style>